<template>
  <div>
    <bread-nav
      v-if="commonArr.length > 0"
      @goProvinceMap="goProvinceMap"
      :paneCityList="provinceList"
      :navData="navData"
      @goNav="goNav"
    ></bread-nav>
    <pane-item
      v-if="commonArr.length > 0"
      :describe="describe"
      @transform="transform"
    ></pane-item>
    <notice-pane v-if="commonArr.length > 0" :commonArr="commonArr"></notice-pane>
    <Map
      :mapOption="mapOption"
      :barOption="barOption"
      :pieOption="pieOption"
      :TableType="TableType"
      :virusCity="virusCity"
      @freshTable="freshTable"
    ></Map>
  </div>
</template>

<script setup>
import axios from "axios";
import NoticePane from "../../../components/notice/notice.vue";
import paneItem from "../../../components/pane/pane.vue";
import BreadNav from "../../../components/bread/bread.vue";
import { ref, onMounted, computed, reactive } from "vue";
import Map from "./map.vue";
// import a from "../city";
onMounted(() => {
  virusNum();
});
let navData = reactive(["中国"]);
const TableType = ref("map");
const describe = reactive([
  { title: "地图", desc: "当前各个地区的确诊人数地图分布", src: "map" },
  { title: "柱状图", desc: "当前各个地区的确诊人数数量分布", src: "bar" },
  { title: "饼状图", desc: "当前各个地区的确诊人数比例分布", src: "pie" },
]);
const changeTableType = () => {
  TableType.value = "map";
};
const provinceData = ref([]);
const citiesData = ref([]);
let virusResult = reactive({});
const paneCityList = ref([]);
const provinceList = ref([]);
let virusCity = ref({});
let commonArr = ref([]);
const goNav = ({ item, index }) => {
  console.log(item);

  if (item === "中国") {
    tableOptionData(provinceData.value);
    navData.length = 1;
  }
};
const goProvinceMap = (item) => {
  navData[1] = item;
  freshTable({ name: item, data: { type: "province" } });
};
const transform = (src) => {
  TableType.value = src;
};
// const virusNum = () => {};
const virusNum = () => {
  axios.get("/virus/search").then((res) => {
    const virusRes = res.data.data;
    const result = JSON.parse(virusRes.virus).results;
    virusResult = result;
    commonArr.value = result
      .filter((item) => item.comment)
      .map((items) => `${items.provinceName}: ${items.comment}`);
    provinceData.value = result.map((item) => {
      transformProvince(item);
      return {
        name: item.provinceName,
        value: item.currentConfirmedCount,
        des: item,
        type: "province",
      };
    });
    paneCityList.value = provinceData.value.map((item) => item.name);
    provinceList.value = paneCityList.value.filter((item) => item !== "中国");
    tableOptionData(provinceData.value);
  });
};

const tableOptionData = (citiesData) => {
  pieOption.legend.data = citiesData.filter((item) => item.name !== "中国");
  pieOption.series[0].data = citiesData.filter((item) => item.name !== "中国");
  mapOption.series[0].data = citiesData;
  barOption.series[0].data = citiesData.map((item) => item.value);
  barOption.yAxis.data = citiesData.map((item) => item.name);
};

const transformProvince = (res) => {
  const provinceList = {
    台湾: "台湾省",
    香港: "香港特别行政区",
    澳门: "澳门特别行政区",
  };
  res.provinceName = provinceList[res.provinceName] ?? res.provinceName;
};
const freshTable = (e) => {
  if (!e.data) return;
  const { type } = e.data;
  if (type === "city") return;
  let cityList = virusResult
    .filter((item) => item.provinceName === e.name)[0]
    .cities.map((item) => {
      return {
        name: item.cityName,
        value: item.currentConfirmedCount,
        des: item,
        type: "city",
      };
    });
  citiesData.value = cityList;
  virusCity.value = {
    cityList,
    province: e.name,
  };
  tableOptionData(citiesData.value);
  navData[1] = e.name;
};
const formatToolTip = () => {
  let isCalc = true;
  let time = "";
  let confirmedCount = "";
  let deadCount = "";
  let curedCount = "";
  let currentConfirmedCount = "";
  return function (params) {
    if (!params.data) {
      return "该地区没有数据";
    }
    if (isCalc) {
      isCalc = false;
      const { des } = params.data;
      time = des.updateTime ? `截止日期: ${formatTime(des.updateTime)}` : "";
      confirmedCount = `累计确诊: ${des.confirmedCount}`;
      deadCount = `累计死亡: ${des.deadCount}`;
      curedCount = `累计治愈: ${des.curedCount}`;
      currentConfirmedCount = `现有确诊: ${des.currentConfirmedCount}`;
      setTimeout(() => {
        isCalc = true;
      }, 150);
    }
    return [time, confirmedCount, deadCount, curedCount, currentConfirmedCount].join(
      "<br>"
    );
  };
};

const testxx = formatToolTip();

function add0(m) {
  return m < 10 ? "0" + m : m;
}
function formatTime(Time) {
  //shijianchuo是整数，否则要parseInt转换
  var time = new Date(parseInt(Time));
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  var h = time.getHours();
  var mm = time.getMinutes();
  var s = time.getSeconds();
  return (
    y + "-" + add0(m) + "-" + add0(d) + "  " + add0(h) + ":" + add0(mm) + ":" + add0(s)
  );
}
const labelOption = {
  align: "left",
  verticalAlign: "middle",
  position: "insideLeft",
  distance: 15,
  show: true,
  formatter: (params) => {
    const { data } = params;
    return `当前确诊人数: ${data}`;
  },
  fontSize: 10,
  rich: {
    name: {},
  },
};
const barOption = reactive({
  title: {
    text: "中国疫情分布图",
    left: "center",
  },
  xAxis: {
    type: "value",
  },
  yAxis: {
    type: "category",
    axisLabel: {
      rotate: 30,
    },
    data: [],
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  animationDurationUpdate: 1000,
  series: [
    {
      type: "bar",
      id: "map",
      data: [],
      emphasis: {
        focus: "series",
      },
      label: labelOption,
      universalTransition: true,
    },
  ],
});
let pieOption = reactive({
  title: {
    text: "中国疫情分布图",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    type: "scroll",
    orient: "vertical",
    right: 10,
    top: 0,
    data: [],
  },
  series: [
    {
      id: "map",
      name: "当前确诊人数",
      type: "pie",
      animationDurationUpdate: 1000,
      universalTransition: true,
      radius: "55%",
      center: ["40%", "50%"],
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});
let mapOption = reactive({
  title: {
    text: "中国疫情分布图",
    left: "center",
  },
  tooltip: {
    showDelay: 0,
    transitionDuration: 0.2,
    formatter: (params) => testxx(params),
  },
  visualMap: {
    min: 0,
    max: 400,
    right: "10%",
    bottom: "5%",
    inRange: {
      color: ["#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"],
    },
    text: ["High", "Low"],
    calculable: true,
  },
  toolbox: {
    show: true,
    //orient: 'vertical',
    left: "left",
    top: "top",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {},
    },
  },
  series: [
    {
      id: "map",
      name: "China",
      type: "map",
      roam: false,
      map: "China",
      animationDurationUpdate: 1000,
      universalTransition: true,
      emphasis: {
        label: {
          show: true,
        },
      },
      itemStyle: {
        borderType: "solid",
        borderWidth: 1,
        borderColor: "rgba(0,0,0,0.2)",
        emphasis: {
          borderWidth: 1,
          shadowBlur: 5,
          shadowColor: "rgba(135,138,255,.5)",
        },
      },
      data: [],
    },
  ],
});
</script>

<style lang="scss" scoped></style>
